<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <section>
        全选
        <input type="checkbox" v-model="checkAll" />
      </section>
      <section>
        <input
          type="checkbox"
          v-for="(item, index) in checks"
          :key="index"
          v-model="item.check"
        />
      </section>
    </div>
  </body>
  <script src="./node_modules/vue/dist/vue.js"></script>
  <script>
    const vm = new Vue({
      el: '#app',
      data() {
        return {
          foo: {
            bar: 'bar'
          },
          baz: 'baz',
          checks: [
            {
              check: true
            },
            {
              check: false
            },
            {
              check: true
            }
          ]
        }
      },
      computed: {
        checkAll: {
          get() {
            return this.checks.every((item) => item.check)
          },
          set(newValue) {
            this.checks.forEach((item) => (item.check = newValue))
          }
        }
      },
      watch: {
        foo: {
          deep: true,
          handler(newValue, oldValue) {
            console.log(newValue, oldValue)
          }
        },
        baz: {
          handler(newValue, oldValue) {
            console.log(newValue, oldValue)
          }
        }
      }
    })

    // setTimeout(() => {
    //   vm.baz = 'bazzz'
    // }, 1000)
  </script>
</html>
